<template>
	<view class="entirety">
		<view class="head">
			<view>已绑定手机号:{{phone.replace(/^(.{3})(?:\d+)(.{2})$/, "$1*****$2")}}</view>
		</view>
		<view class="phone">
			<view class="title">新手机号:</view>
			<view class="value"><u--input placeholder="请输入新手机号" border="surround" v-model="value" @change="change"
					style="width: 50px"></u--input></view>
		</view>
		<view class="password">
			<view class="title">验证码:</view>
			<view class="value"><u--input placeholder="请输入验证码" border="surround" v-model="value" @change="change"
					style="width: 50px"></u--input></view>
			<!-- 验证码按钮BEGIN -->
			<view class="wrap">
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-button @tap="getCode">{{tips}}</u-button>
			</view>
			<!-- 验证码按钮END -->
		</view>
		<view class="tail">
			<view style="padding: 20px;">
					<u-button type="primary" text="确定"></u-button>
			</view>		
		</view>
	</view>
</template>

<script>
import "@/uni_modules/uview-ui/index.scss";
export default {
		onLoad() {
			var that = this;
			  uni.getStorage({
			    key: 'PhoneNum',
			    success: function(res){
			      console.log('接收到的用户信息1：', res.data);
				  that.phone = res.data;
			    }
			  });
		},
		data() {
			return {
				phone:'',//已绑定的手机号
				value: '',
				tips: '',
				// refCode: null,
				seconds: 60,
				disabled: true,
			}
		},
		methods: {
			change(e) {

			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	.entirety {
		width: 100%;
		height: 100%;
		align-items: center;
	}

	.head {
		text-align: center;
		font-size: 18px;
		padding-top: 20%;
	}

	.phone {
		padding-top: 10%;
		width: 100%;
		height: 70px;
	}

	.password {
		width: 100%;
		height: 70px;
	}

	.title {
		float: left;
		padding-left: 2%;
		align-items: center;
		text-align: center;
		height: 70px;
		width: 25%;
		line-height: 70px;
	}

	.value {
		float: left;
		padding-left: 2%;
		height: 70px;
		width: 35%;
		line-height: 70px;
		display: flex;
		align-items: center;
	}
	.wrap {
		padding: 24rpx;
		float: left;
	}
	.tail{
		width: 100%;
		height: 100px;
		padding-top: 90%;
		
	}
</style>